<template>
	<div class="w100 h100 flex-col">
		<threePage class="three" />
		<div class="flex h100 m-between">
			<div class="left flex-col p-t-26 p-l-10 p-b-10">
				<my-box class="m-b-10" title="环境检测">
					<div class="flex w100 m-between overflow-y-auto" style="max-height: 120px; flex-wrap: wrap">
						<div class="item p-10 flex m-between b-r-2" v-for="(item, index) in environmentList" :key="index">
							<div class="flex">
								<img :src="getImgUrl(`../assets/img/rd/${item.imgs}.png`)" alt="" />
								<div class="flex-col m-l-4">
									<span class="name">{{ item.name }}</span>
									<span class="englishname">{{ item.Englishname }}</span>
								</div>
							</div>
							<div>
								<span class="value">{{ item.value }}</span>
								<span class="unit">{{ item.unit }}</span>
							</div>
						</div>
					</div>
				</my-box>
				<my-box class="m-b-10 f1 h0" title="带班人员">
					<div class="flex-col w100 h100 overflow-y-auto">
						<div class="take_person p-l-10 p-r-10 b-r-2 flex m-between" v-for="(item, index) in takePerson" :key="index">
							<div style="line-height: 32px">
								<img src="@/assets/img/rd/arrowRight.png" alt="" />
								<span class="name m-l-10">{{ item.leaderName }}</span>
							</div>
							<div class="" style="line-height: 32px">
								<span class="name">{{ item.leaderPhone }}</span>
								<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
							</div>
						</div>
					</div>
				</my-box>
				<my-box class="m-b-10" title="掘进进度">
					<div class="progress flex-col w100" style="max-height: 120px">
						<div class="flex m-between m-b-10">
							<div class="finish_len">
								<span>当前已完成：</span>
								<span>{{ progress.finishedLength }}米</span>
							</div>
							<div class="finish_len">
								<span>设计长度：</span>
								<span>{{ progress.designLength }}米</span>
							</div>
						</div>
						<el-progress :percentage="percentage" :stroke-width="4" :show-text="false" color="linear-gradient(270deg, #4D88FE 4%, #4DB5FF 99%)">
						</el-progress>
						<div class="days">
							<span>
								预计完成还需：<span class="m-r-4" style="font-size: 18px; color: #fff">{{ progress.planningDateCount }}</span
								>天
							</span>
						</div>
					</div>
				</my-box>
				<my-box class="flex-col" title="巷道断面图">
					<div class="flex-center">
						<img src="@/assets/img/rd/fracture.png" alt="" />
					</div>
				</my-box>
				<div class="middle">
					<span style="color: #fff">五盘区域回风巷掘进面</span>
				</div>
			</div>
			<div class="right p-t-26">
				<div class="flex m-between" style="flex-wrap: wrap">
					<div class="start pointer">
						<img src="@/assets/img/rd/start.png" style="vertical-align: middle" alt="" />
						<span style="font-size: 14px; color: #deedff">一键启动</span>
					</div>
					<div class="stop pointer">
						<img src="@/assets/img/rd/stop.png" style="vertical-align: middle" alt="" />
						<span style="font-size: 14px; color: #deedff">一键停机</span>
					</div>
					<div class="empty"></div>
					<my-alarm type="2" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="comprehensive/tunnelling">
import { leaderInfo, environmentMonitoring, tunnellingProgress } from '@a/tunnelling'
import threePage from './3d/tunnelling.vue'

// 环境检测数据
let environmentList = reactive([
	{ imgs: 'gas', name: '瓦斯浓度', Englishname: 'GAS', value: 0, unit: '%' },
	{ imgs: 'dust', name: '粉尘浓度', Englishname: 'DUST', value: 0, unit: 'mg/m³' }
])
environmentMonitoring().then((res) => {
	environmentList[0].value = res.data.gasConcentration
	environmentList[1].value = res.data.dustConcentration
})

// 带班人员数据
let takePerson = ref([])
leaderInfo().then((res) => {
	takePerson.value = res.data
})

// 掘进进度数据
let progress = ref({
	designLength: 0,
	finishedLength: 0,
	planningDateCount: 0
})
let percentage = computed(() => +((progress.value.finishedLength / progress.value.designLength) * 100).toFixed(2))
tunnellingProgress().then((res) => {
	progress.value = res.data
})
</script>

<style lang="scss" scoped>
//左侧样式
.left {
	position: relative;
	width: 400px;
	height: 100%;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	//环境检测样式
	.item {
		margin-top: 10px;
		width: 180px;
		height: 48px;
		font-size: 12px;
		font-weight: 500;
		color: #deedff;
		line-height: 24px;
		opacity: 1;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 8px 0px #3468d8;
		cursor: pointer;
		.name {
			line-height: 15px;
		}
		.englishname {
			line-height: 20px;
			transform-origin: 0 0;
			transform: scale(0.8);
			color: rgb(130, 135, 144);
		}
		.value {
			font-size: 18px;
			font-weight: bold;
		}
		.unit {
			margin-left: 4px;
			font-size: 14px;
			color: rgb(130, 135, 144);
			text-shadow: 0px 1px 1px 0px rgba(4, 18, 42, 0.3);
		}
	}

	//带班人员样式
	.take_person {
		margin-top: 10px;
		height: 32px;
		font-size: 14px;
		background: rgba(62, 99, 176, 0.2);
		cursor: pointer;
		.name {
			color: #fff;
		}
		.captain {
			color: rgb(130, 135, 144);
		}
	}
	.take_person:nth-child(1) {
		margin: 0;
	}

	//掘进进度样式
	.progress {
		.total_length {
			font-size: 14px;
			cursor: pointer;
			span:nth-child(1) {
				color: #fff;
			}
			span:nth-child(2) {
				color: #397bfd;
			}
		}
		.finish_len {
			font-size: 14px;
			cursor: pointer;
			span:nth-child(1) {
				font-size: 12px;
				color: rgb(130, 135, 144);
			}
			span:nth-child(2) {
				color: #397bfd;
			}
		}
		.days {
			margin-top: 10px;
			text-align: center;
			line-height: 32px;
			height: 32px;
			border-radius: 2px;
			background: rgba(62, 99, 176, 0.2);
			font-size: 14px;
			color: rgb(130, 135, 144);
			cursor: pointer;
		}
	}
	//中间样式
	.middle {
		position: absolute;
		top: 4%;
		right: -210px;
		font-size: 16px;
		font-weight: bold;
		line-height: 20px;
		letter-spacing: 2px;
		color: #deedff;
	}
}

//右侧样式
.right {
	position: relative;
	width: 270px;
	height: 100%;
	z-index: 2;
	.start,
	.stop {
		width: 130px;
		height: 40px;
		text-align: center;
		line-height: 36px;
		font-size: 14px;
		letter-spacing: 1px;
		border-radius: 4px;
		background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
		box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
		span {
			margin-left: 3px;
		}
	}

	.empty {
		width: 130px;
	}
	:deep(.abnormal) {
		position: relative;
		top: 0;
		right: 0;
		padding: 0;
		background: rgba(244, 87, 87, 0.2);
		border: 1px solid #f45757;
		box-sizing: border-box;
		width: 130px;
		height: 40px;
		text-align: center;
		line-height: 36px;
		font-size: 14px;
		letter-spacing: 1px;
		border-radius: 4px;
		box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
		span {
			margin-left: 3px;
		}
	}
	.camera {
		cursor: pointer;
		position: absolute;
		top: 15%;
		right: 0;
	}
}
</style>
